@charset "utf-8";

/* 设置外边框，方便观察 */
body{
	margin: 300px;
}

p{
	border: solid 1px silver;
}

/******************** 平移 ********************/
img{
	/* 水平平移 */
	/*transform: translate(200px);*/
	/*transform: translateX(200px);*/
	/*transform: translateX(30%);*/

	/* 垂直平移 */
	/*transform: translate(0, 200px);*/
	/*transform: translateY(200px);*/
	/*transform: translateY(30%);*/

	/* 水平、垂直两个方向平移，只写一个值的话会在水平方向移动 */
	/*transform: translate(200px, 200px);*/

	/* 如果设置成负值的话，会往相反的方向移动 */
	/*transform: translate(-200px, -200px);*/
}
/******************** 缩放 ********************/
/* 提示：缩放只能是数值，大于1 表示放大，小于 1 表示缩小 */
img{
	/* 水平方向缩放 */
	/*transform: scale(2.0, 1.0);*/
	/*transform: scaleX(2.0);*/
	/*transform: scaleX(0.5);*/

	/* 垂直方向缩放 */
	/*transform: scale(1.0, 2.0);*/
	/*transform: scaleY(2.0);*/

	/* 水平、垂直两个方向都缩放 */
	/*transform:scale(2.0, 2.0);*/
	/*transform:scale(0.7, 2.0);*/
}
/******************** 旋转 ********************/
/* 提示：旋转角度 0 ~ 360 度之间，负值也可以 */
img{
	/*transform: rotate(45deg);*/
	/*transform: rotate(450deg);*/
}
/******************** 倾斜 ********************/
/* 提示：倾斜角度 0 ~ 360 度之间，负值也可以 */
img{
	/* 水平倾斜元素 */
	/*transform: skewX(45deg);*/
	/*transform: skewX(-45deg);*/

	/* 垂直倾斜元素 */
	/*transform: skewY(45deg);*/
	/*transform: skewY(-45deg);*/

	/* 倾斜元素(水平、垂直) */
	/*transform:skew(45deg, 60deg);*/
}
/******************** 自定义变换 ********************/
img{
	/* 通过六个值指定矩形，其内部公式比较复杂，请问度娘 */
	/*transform: matrix(1, 0, 0, 1, 30, 30);*/
}
/******************** 简写 ********************/
img{
	/* 不同的值可以累计，通过空格分割 */
	/*transform: rotate(45deg) scale(1.4);*/
}

/******************** 改变基准点 ********************/
img{
	/* 默认情况 */
	/*transform-origin:center center;*/
	/*transform-origin:50% 50%;*/

	/* 以右上角为基准点 */
	/*transform-origin:right top;*/
	/*transform-origin: 290px 0px;*/
}

/******************** 兼容版 ********************/
img{
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);

	-webkit-transform-origin:left top;
	-moz-transform-origin:left top;
	-o-transform-origin:left top;
	-ms-transform-origin:left top;
	transform-origin:left top;
}






